<template>
  <div class="contain">
    <div class="header">
      <span class="main-text">注册会计师</span>
      <span class="child-text">{{ hoverText }}</span>
      <a-dropdown class="dropdown-item">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          {{ hoverText }}
          <a-icon type="down"/>
        </a>
        <a-menu slot="overlay">
          <a-menu-item v-for="(item,index) in hoverArray" :key="index" @click="chooseItem(item)">
            <a class="hover-item" :class="item==hoverText?'active':''">{{ item }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <div class="chart-item">
      <div class="title">课程进度</div>
      <div class="chart-info">
        <div class="tag">答题数量</div>
        <div id="main"></div>
        <div class="process-info">
          <div class="infos" v-for="(item,index) in 5" :key="index"><span class="info-text">总习题数</span><span class="info-num">2000</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item">
      <div class="title">课程观看进度</div>
      <div class="chart-info">
        <div class="tag">课程进度</div>
        <div id="main_bar"></div>
        <div class="process-info">
          <div class="infos" v-for="(item,index) in 5" :key="index"><span class="info-text">总习题数</span><span class="info-num">2000</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-item">
      <div class="title">课程观看进度</div>
      <div class="chart-info">
        <div class="tag">知识点分析</div>
        <div id="main_2"></div>
        <div class="process-info">
          <div class="infos" v-for="(item,index) in 5" :key="index"><span class="info-text">总习题数</span><span
              class="info-num">2000</span>
          </div>
        </div>
      </div>
      <a-table :columns="columns" :data-source="data" bordered>
        <template
            v-for="(col) in ['name', 'age', 'address']"
            :slot="col"
            slot-scope="text, record"
        >
          <div :key="col">
            <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
        <span v-if="record.editable">
          <a @click="() => save(record.key)">Save</a>
          <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
            <a>Cancel</a>
          </a-popconfirm>
        </span>
            <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.key)">查看错题</a>
        </span>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
var chart = require('../../../plugins/echartsUtil.js')
const columns = [
  {
    title: '章节名称',
    dataIndex: 'a',
    width: '25%',
    scopedSlots: {customRender: 'a'},
  },
  {
    title: '答题总数',
    dataIndex: 'b',
    scopedSlots: {customRender: 'b'},
  },
  {
    title: '答对数',
    dataIndex: 'c',
    scopedSlots: {customRender: 'c'},
  },
  {
    title: '正确率',
    dataIndex: 'd',
    scopedSlots: {customRender: 'd'},
  },
  {
    title: '答对总数',
    dataIndex: 'e',
    scopedSlots: {customRender: 'e'},
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: {customRender: 'operation'},
  },

];

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i.toString(),
    a: `Edrward ${i}`,
    b: 32,
    c: `London Park no. ${i}`,
    d: 'd',
    e: 'e',
    f: 'f'
  });
}
export default {
  name: 'order',
  data() {
    this.cacheData = data.map(item => ({...item}));
    return {
      data,
      columns,
      editingKey: '',
      hoverArray: ['会计', '审计', '税对'],
      hoverText: '切换',
      activeKey: ['1'],
      account: '',
      currentTab: 0,
      tabs: ['全部订单', '待付款', '已付款', '已取消'],
      isOpen: false,//是否展开详细内容
      detailTab: null,//当前展开的索引值
      orderList: [],
      itemList: []
    }
  },
  watch: {
    currentTab(val) {
      let statusList = ['', '待付款', '已完成', ''];
      let status = statusList[val];
      let temp = Object.assign(this.orderList);
      console.log(status)
      this.itemList.filter(item => {
        if (!status) return true;
        return item.status === status;
      })
      console.log(temp)
    }
  },
  mounted: function () {
    this.initChartPie();
    this.initChartPie2();
    this.initChartBar();
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.data = newData;
      }
    },
    initChartPie() {
      let myChart = this.$echarts.init(document.getElementById('main'))
      let data = {
        legend: {
          data: ['已做题目', '未做题目'],
          icon: 'circle',
          orient: 'horizontal',
          left: 'center',
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}:({d}%)'
        },
        color: ['#64A0F8', '#76C8CA'],
        series: [{
          name: '访问来源',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: [
            {value: 600, name: '已做题目'},
            {value: 400, name: '未做题目'}
          ],
          type: 'pie',
          label: {
            color: '#000'
          }
        }],
      }
      let option = chart.pie(data);
      // 绘制图表
      myChart.setOption(option);
    },
    initChartPie2() {
      let myChart = this.$echarts.init(document.getElementById('main_2'))
      let data = {
        legend: {
          data: ['第一章', '第二章', '第三章', '第四章', '第五章',],
          icon: 'circle',
          orient: 'horizontal',
          bottom: 0,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}:({d}%)'
        },
        color: ['#64A0F8', '#76C8CA', '#7CC97D', '#F5D560', '#E46E7E'],
        series: [{
          name: '访问来源',
          radius: ['0%', '70%'],
          center: ['50%', '40%'],
          avoidLabelOverlap: false,
          emphasis: {
            label: {
              show: true,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: [
            {value: 600, name: '第一章'},
            {value: 400, name: '第二章'},
            {value: 600, name: '第三章'},
            {value: 400, name: '第四章'},
            {value: 600, name: '第五章'},
          ],
          type: 'pie',
          label: {
            color: '#000'
          }
        }],
      }
      let option = chart.pie(data);
      console.log(option);
      // 绘制图表
      myChart.setOption(option);
    },
    initChartBar() {
      let myChart = this.$echarts.init(document.getElementById('main_bar'))
      let data = {
        title: '',
        legend: {
          show: false
        },
        grid: {
          top: '5%',
          bottom: '15%',
          left: '15%',
          right: '0%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ['#64A0F8', '#76C8CA'],
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            show: false

          },
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        },
          {
            data: [220, 100, 350, 180, 170, 210, 330],
            type: 'bar'
          }],
      }
      let option = chart.bar(data);
      // 绘制图表
      myChart.setOption(option);
    },
    chooseItem(item) {
      this.hoverText = item;
      console.log(this.hoverText);
    },


  }
}
</script>

<style lang="scss" scoped>
.contain {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #f7f7f7;

  .header {

    .main-text {
      font-size: 24px;
      font-weight: 700;
      margin-right: 40px;
    }

    .child-text {
      font-size: 20px;
      font-weight: 700;
      margin-right: 40px;
    }

    .dropdown-item {
      background: url("../../../assets/image/icon/drop-bg.png") no-repeat;
      background-size: 100% 100%;
      padding: 5px 15px;
      color: #fff;

      .hover-item.active {
        background-color: #9FBCFB;
      }
    }

  }

  .chart-item {
    margin-top: 40px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.0470588235294118);
    position: relative;
    overflow: hidden;

    .tag {
      position: absolute;
      right: -30px;
      top: 20px;
      background-color: #EDC575;
      text-align: center;
      padding: 5px 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 130px;
      font-size: 14px;
      transform: rotate(45deg);
      color: #fff;
      font-weight: bold;
      overflow: hidden;
    }

    & > .title {
      font-weight: 700;
      color: #000000;
      font-size: 13px;
      padding: 20px;
    }

    .chart-info {
      padding: 20px;
      display: flex;
      align-items: center;

      #main, #main_bar, #main_2 {
        width: 450px;
        height: 250px;
      }

      .process-info {
        width: calc(100% - 450px);
        text-align: center;

        .infos {
          margin-bottom: 25px;

          .info-text {
            color: #999999;
            font-size: 14px;
            margin-right: 40px;
          }

          .info-num {
            color: #FF6A00;
            font-size: 13px;

          }
        }
      }


    }

    .ant-table-wrapper {
      width: 90%;
      margin: 40px auto;
    }

  }


}


.inline-block {
  display: inline-block;
  margin-bottom: 20px;
}

.vertical-top {
  vertical-align: top;
}

.btn {
  cursor: pointer;
}

.price {
  color: #333;
}
</style>